<template>
  <div>
    <el-table
      :data="childTagList"
      style="width: 100%"
      stripe
      border
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
      v-loading="loading"
    >
      <el-table-column :label="$t('common.label.departmentName')" show-overflow-tooltip>
        <template slot-scope="scope">
          <a 
            href="javascript:;"
            @click="openDetail(scope.row.id)" 
            class="task-link">
            <template v-if="tenantType == 2 && scope.row.dingId">
              <open-data type="departmentName" :openid="scope.row.dingId"></open-data>
            </template>
            <template v-else>
              {{ scope.row.tagName }}
            </template>
          </a>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.label.DepartmentHeads')" show-overflow-tooltip>
        <template slot-scope="scope" v-if="scope.row.teamLeaders">
          <template v-if="isOpenData">
            <open-data v-for="item in scope.row.teamLeaders" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
          </template>
          <template v-else>
            {{scope.row.teamLeaders.map((i) => (i && i.displayName) || "").join("，")}}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="phone" :label="$t('common.label.contactPhone')" />
      <el-table-column :label="$t('common.label.departmentLocation')" show-overflow-tooltip>
        <template slot-scope="scope" v-if="scope.row.myTagAddress">{{
          scope.row.myTagAddress | fmt_address
        }}</template>
      </el-table-column>
      <el-table-column :label="$t('common.label.territory')" show-overflow-tooltip>
        <template slot-scope="scope" v-if="scope.row.tagPlaceList">{{
          scope.row.tagPlaceList
            .map(
              (p) => fmtDist(p)
            )
            .join("，\n")
        }}</template>
      </el-table-column>
      <el-table-column :label="$t('common.label.operate')">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="openDepartmentEditPanel(scope.row)"
            v-if="allowTagEdit"
          >{{ $t('common.base.edit') }}</el-button
          >
          <el-button
            type="text"
            style="color: #fb602c"
            @click="delDepartment(scope.row.id)"
            v-if="allowTagDelete"
          >{{ $t('common.base.delete') }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="base-pagination"
      :background="true"
      layout="total, prev, pager, next"
      :total="total"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.pageNum"
      @current-change="jump"
    >
    </el-pagination>
  </div>
</template>

<script>
import { isOpenData, openAccurateTab } from '@src/util/platform'
import * as DeptHomeApi from "@src/api/DeptHomeApi";

/* util */
import { getRootWindowInitData } from '@src/util/window'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
const rootWindowInitData = getRootWindowInitData();
import { fmtDist } from '@src/util/addressUtil';
export default {
  name: "dept-home-child-list",
  props: {
    detailId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isOpenData,
      childTagList: [], // 成员列表
      pageInfo: {
        // 分页
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // 总数
      loading: false,
      rootWindowInitData
    };
  },
  computed: {
    authorities() {
      return rootWindowInitData?.user?.auth || {}
    },
    allowTagCreate() {
      return this.authorities?.AUTH_TAG
    },
    allowTagEdit() {
      return this.authorities?.TAG_EDIT
    },
    allowTagDelete() {
      return this.authorities?.TAG_DELETE
    },
  },
  mounted() {
    this.getDeptChildTagList();
  },
  methods: {
    fmtDist,
    // 部门主页子部门
    getDeptChildTagList() {
      this.loading = true;

      DeptHomeApi.getDeptChildTagList({
        tagName: "",
        tagId: this.detailId,
        ...this.pageInfo
      }).then((res) => {
        const { status, message, data } = res;
        if (status !== 0) return;

        this.childTagList = data.list || [];

        if(this.childTagList.length > 0){
          this.childTagList.map(x=>{
            const {
              address,
              addressType,
              city,
              dist,
              latitude,
              longitude,
              country,
              province,
            } = x;
            x.myTagAddress = {
              address,
              addressType,
              city,
              dist,
              latitude,
              longitude,
              country,
              province,
            }
            return x;
          })
        }

        this.total = data.total;
        this.loading = false;
      }).catch(e=>{
        this.loading = false;
        console.error('fetch task caught e', e)
      })
    },
    jump(e) {
      this.pageInfo.pageNum = e;
      this.getDeptChildTagList();
    },
    // 编辑
    openDepartmentEditPanel(row){
      this.$emit('childEdit',row);
    },
    // 删除
    delDepartment(id){
      this.$emit('childDel',id);
    },
    // 子部门详情
    openDetail(id){
      //  this.$platform.openTab({
      //   id: `dept_home`,
      //   title: '部门主页',
      //   close: true,
      //   url: `/security/tag/home/${id}`
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageDeptHome,
        key: id,
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.task-link {
  @include fontColor();
}
</style>